<template>
  <el-dialog
    v-model="dialogVisible"
    width="30%"
    :show-close="false"
    style="padding-right: 24px; padding-left: 24px"
  >
    <el-descriptions title="用户信息"
                     :column="1"
                     border
    >
      <el-descriptions-item label="账号名">{{userInfo.username}}</el-descriptions-item>
      <el-descriptions-item label="昵称">{{userInfo.nickname}}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{userInfo.email}}</el-descriptions-item>
      <el-descriptions-item label="角色">
        <span style="margin: 1px" v-for="(item, index) in roleList" :key="index">
          <el-tag v-if="index%2" type="success">{{item.name}}</el-tag>
          <el-tag v-else>{{item.name}}</el-tag>
        </span>

      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from 'vue'
import { getRoleNameListByUserId } from '@/api/role'

export default {
  name: 'UserDetail',
  setup () {
    return {
      dialogVisible: ref(false),
      userInfo: ref({
        username: '',
        nickname: '',
        email: ''
      }),
      roleList: ref({})
    }
  },
  methods: {
    getUserRoleByUserId (userId) {
      getRoleNameListByUserId(userId).then((val) => {
        console.log(val.data)
        this.roleList = val.data
      })
    },
    handleClose () {
      return null
    },
    confirmHandler () {

    }
  }
}
</script>

<style scoped>

</style>
